<template>
  <div class="container">
    <div>
      <el-row>
        <!-- <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="时间周期：">
              <el-select
                style="width: 180px"
                v-model="queryType"
                placeholder="请选择"
                @change="changeHandler"
              >
                <el-option
                  v-for="item in queryTypeList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="被考核单位：" style="width: 270px">
              <el-select v-model="DW" placeholder="请选择" clearable>
                <el-option
                  v-for="item in unitData"
                  :key="item.CLIENT_NO"
                  :label="item.UNITNAME"
                  :value="item.CLIENT_NO"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form label-width="120px">
            <el-form-item label="考核项目：" style="width: 270px">
              <el-select
                v-model="XM"
                placeholder="请选择"
                @change="getObjectTypelList()"
                clearable
              >
                <el-option
                  v-for="item in itemData"
                  :key="item.ID"
                  :label="item.ITEMNAME"
                  :value="item.ID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form label-width="80px">
            <el-form-item label="案件标题：" style="width: 270px">
              <el-input v-model="TITLE" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <!-- <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="选择时间：">
              <el-date-picker
                v-model="valueDay"
                :type="typeDatePicker"
                :value-format="formatDatePicker"
                placeholder="选择时间"
                style="width: 180px"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="考核类型：" style="width: 270px">
              <el-select v-model="LX" placeholder="请选择" clearable>
                <el-option
                  v-for="item in typeData"
                  :key="item.ID"
                  :label="item.TYPENAME"
                  :value="item.ID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form label-width="120px">
            <el-form-item label="考核对象类型：" style="width: 270px">
              <el-select v-model="DLX" placeholder="请选择" clearable>
                <el-option
                  v-for="item in objectTypeData"
                  :key="item.ID"
                  :label="item.OBJECTTYPE"
                  :value="item.ID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form style="margin-left: ">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      border
      highlight-current-row
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column
        prop="ID"
        label="案件编号"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="TYPENAME"
        label="考核类型"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="UNITNAME"
        label="被考核单位"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ITEMNAME"
        label="考核项目"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="OBJECTTYPE"
        label="被考核类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="TITLE"
        label="标题"
        align="center"
      ></el-table-column>
      <el-table-column label="案件图片">
        <template slot-scope="scope">
          <div v-if="scope.row.PHOTO">
            <img
              v-for="(img, index) in scope.row.PHOTO.split(',')"
              :key="index"
              :src="img"
              style="
                width: 50px;
                height: 50px;
                object-fit: cover;
                margin-right: 5px;
              "
              @click="bigImage(scope.row)"
            />
          </div>
          <span v-else><i class="el-icon-picture-outline"></i></span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="案件录音">
        <template slot-scope="scope">
          <audio
            v-if="scope.row.AUDIO"
            :src="scope.row.AUDIO"
            controls
            style="width: 50px; height: 50px"
          ></audio>
          <span v-else><i class="el-icon-headset"></i></span>
        </template>
      </el-table-column> -->
      <el-table-column label="案件视频"
        ><template slot-scope="scope">
          <video
            v-if="scope.row.VEDIO"
            :src="scope.row.VEDIO"
            controls
            style="width: 50px; height: 50px"
          ></video>
          <span v-else><i class="el-icon-video-camera"></i></span>
        </template>
      </el-table-column>

      <el-table-column
        prop="NAME"
        label="考评人员"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="TASKTIME"
        label="上报日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="FRISTTIME"
        label="审核日期"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog title="整改详情" :visible.sync="showS" width="50%">
      <el-table border :data="statisticsData">
        <el-table-column label="整改图片">
          <template slot-scope="scope">
            <div v-if="scope.row.ZGPHOTO">
              <img
                v-for="(img, index) in scope.row.ZGPHOTO.split(',')"
                :key="index"
                :src="img"
                style="
                  width: 50px;
                  height: 50px;
                  object-fit: cover;
                  margin-right: 5px;
                "
                @click="bigImage1(scope.row)"
              />
            </div>
            <span v-else><i class="el-icon-picture-outline"></i></span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="整改录音">
        <template slot-scope="scope">
          <audio
            v-if="scope.row.ZGAUDIO"
            :src="scope.row.ZGAUDIO"
            controls
            style="width: 50px; height: 50px"
          ></audio>
          <span v-else><i class="el-icon-headset"></i></span>
        </template>
      </el-table-column> -->
        <el-table-column label="整改视频"
          ><template slot-scope="scope">
            <video
              v-if="scope.row.ZGVEDIO"
              :src="scope.row.ZGVEDIO"
              controls
              style="width: 50px; height: 50px"
            ></video>
            <span v-else><i class="el-icon-video-camera"></i></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="THIRDTIME"
          label="整改日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ZGDays"
          label="整改耗时"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ADDPOINT"
          label="追加扣分"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="图片展示"
      :visible.sync="formImage.show"
      width="30%"
    >
      <el-carousel arrow="always">
        <el-carousel-item v-for="index in formImage.src" :key="index">
          <el-image style="width: 100%; height: 100%" :src="index"></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      typeData: [],
      unitData: [],
      itemData: [],
      objectTypeData: [],
      statisticsData: [],
      pointData: [],
      DW: "",
      XM: "",
      LX: "",
      DLX: "",
      TITLE: "",
      typeDatePicker: 'date',
      formatDatePicker: 'yyyy-MM-dd',
      valueDay: '',
      queryType: 1,
      queryTypeList: [{
        value: 1,
        label: '按日期查询'
      }, {
        value: 2,
        label: '按月份查询'
      }, {
        value: 3,
        label: '按年份查询'
      }],
      loading: false,
      showS: false,
      showP: false,
      URLByTYPE: 'Worker',
      formImage: {
        show: false,
        src: [],
      },
    }
  },
  created () {
    this.valueDay = formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd')
  },
  mounted () {
    this.getUnitList()
    this.getTypeList()
    this.getItemList()
    this.getlistdata()
  },
  methods: {
    // 获取考核单位列表
    async getUnitList () {
      var url = 'Assess/GetUnit_Assess?UNITNAME='
      let { data } = await this.$Http.get(url)
      this.unitData = data
    },
    // 获取考核类型列表
    async getTypeList () {
      var url = 'Assess/GetCheckType_Assess?TYPENAME='
      let { data } = await this.$Http.get(url)
      this.typeData = data
    },
    // 获取考核项目列表
    async getItemList () {
      var url = 'Assess/GetCheckItem_Assess?KEY='
      let { data } = await this.$Http.get(url)
      this.itemData = data
    },
    // 获取考核对象类型
    async getObjectTypelList () {
      var url = 'Assess/GetObjectType_Assess?ITEMID=' + this.XM + '&OBJECTTYPE='
      let { data } = await this.$Http.get(url)
      this.objectTypeData = data
    },
    async getlistdata () {
      var url = '/Assess/GetStatisticsCaseDetailList_Assess?TITLE=' + this.TITLE + '&CLIENT_NO=' +
        this.DW + '&ITEMID=' + this.XM + '&CHECKTYPE=' + this.LX + '&OBJECTTYPE=' + this.DLX
      const { data } = await this.$Http.get(url)
      this.tableData = data
    },
    changeHandler () {
      switch (this.queryType) {
        case 1:
          this.typeDatePicker = 'date'
          this.formatDatePicker = 'yyyy-MM-dd'
          break
        case 2:
          this.typeDatePicker = 'month'
          this.formatDatePicker = 'yyyy-MM'
          break
        case 3:
          this.typeDatePicker = 'year'
          this.formatDatePicker = 'yyyy'
          break
        default:
          break
      }
      this.valueDay = ''
    },
    // 导出Excel
    exportExcel () {
      let excelName = '案件处置明细'
      var tHeader = ['案件编号', '考核类型', '被考核单位', '考核项目', '被考核类型', '标题', '案件图片', '案件视频', '考评人员', '上报日期', '审核日期']
      var filterVal = ['ID', 'TYPENAME', 'UNITNAME', 'ITEMNAME', 'OBJECTTYPE', 'TITLE', 'PHOTO', 'VEDIO', 'NAME', 'TASKTIME', 'FRISTTIME']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    //详情
    handleEdit (index, row) {
      this.showS = true
      this.statisticsData = []
      this.statisticsData.push(row);
    },
    bigImage (row) {
      this.formImage.src = row.PHOTO.split(',')
      this.formImage.show = true
    },
    bigImage1 (row) {
      this.formImage.src = row.ZGPHOTO.split(',')
      this.formImage.show = true
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>